<template>
  <div>
    <h1>one</h1>
    <hr>
    <hr>
    <h1>直接使用仓库中的数据</h1>
    <p>姓名：{{ $store.state.name }}</p>
    <p>年龄：{{ $store.state.age }}</p>

    <p>姓名：{{ $store.getters.get_name }}</p>
    <p>年龄：{{ $store.getters.get_age }}</p>

    <button @click="$store.commit('mutation_age',1)">直接修改年龄</button>
    <button @click="$store.dispatch('action_age',2)">异步修改年龄</button>
    

    <hr>
    <h1>使用mapState</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ b }}</p>
    <h1>使用mapGetters</h1>
    <p>姓名：{{ Name }}</p>
    <p>年龄：{{ Age }}</p>
    <h1>使用mapMutations</h1>
    <button @click="changeAge(1)">同步修改年龄</button>
    <button @click="changeAsync(2)">异步修改年龄</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
// console.log(mapState); 是一个函数，接收一个数组或者对象 
// console.log(mapState(["name","age"]));
export default {

    computed:{
        // ...mapState(["name","age"]), 可以接受一个数组，或者是一个对象，一般是接收一个对象
        ...mapState({
            name:"name", //可以改名，看自己
            b:"age"
        }),
        ...mapGetters({
            Name:"get_name",
            Age:"get_age"
        })
    },

    methods:{
        ...mapMutations({
            changeAge:"mutation_age"
        }),
        ...mapActions({
            changeAsync:"action_age"
        })
    }       
}
</script>

<style>



</style>